<template>
  <div class="tree" :class="{'first': +node.parent_id === 0}">
    <span class="leaf-node">{{ node.user_id }}</span>
    <template v-if="node.children">
      <template v-for="item in node.children">
        <pai :node="item" :key="item.id" v-if="item.user_id" />
      </template>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Pai',
  props: ['node']
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
}
.first {
  //overflow-x: auto;
  width: 5000px;
}
div.tree {
  display: flex;
  flex-wrap: wrap;/*span 需要独占一行，所以此 flex 布局必须要折行显示 */
  justify-content: flex-start;
  align-items: flex-start;
}
div.tree > span {
  width: 100%;
  text-align: center;
}
.tree > .tree {
  width: 50%;
  box-sizing: border-box;
  min-width: 150px;
}
.leaf-node {
  background: red;
  margin: 5px;
  display: inline-block;
  width: 100px;
  height: 50px;
  //background: red;
  //margin: 10px;
  //min-width: 200px;
}
</style>
